<template>
    <div class="data-view">
        <el-card v-loading='loading'>
            <div id="view" ></div>
        </el-card>
    </div>
</template>

<script>

import {getRelationNodes} from '../../api/api.js';

    export default {
     data() {
            return {
                relationNodes:[],
                categories:[],
                loading:true
            }
        },
        props:{
                nodeID:String,
                selectType:String,
                nodeName:String
                },
    methods: {
        getRelationNodes() {
            console.log('nodeID,',this.nodeID)
            console.log('selectType,',this.selectType)
            getRelationNodes(this.nodeID,this.selectType)
            .then(response =>{
                this.relationNodes = response.data['relationNodes']
                this.categories = response.data['categories']
                console.log('测试关系节点：',this.relationNodes)
                var nodeList = []
                var linkList = []
                var categories = []

                for(let item of this.categories){
                    categories.push({
                    name:item,
                })}

                const cate_index = categories.findIndex((item) => item.name === this.selectType)
                nodeList.push({
                    name: this.nodeName,
                    id: this.nodeID,
                    symbolSize: 40,
                    draggable:true,
                    category:cate_index,
                    
                });
                
                console.log('cate:',categories)
                function generateColor() {
                    // 最小的 RGB 值
                        const min = 50;
                        // 最大的 RGB 值
                        const max = 200;
                        // 生成随机的 RGB 值
                        const r = Math.floor(Math.random() * (max - min) + min);
                        const g = Math.floor(Math.random() * (max - min) + min);
                        const b = Math.floor(Math.random() * (max - min) + min);
                        // 将 RGB 值转换为十六进制颜色值
                        const color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
                        return color;
                    }
                for(let item of this.relationNodes){
                    var relation = item['relation']
                    var nodes = item['nodesList']
                    const category = item['category']
                    const cate_index = categories.findIndex((item) => item.name === category)
                    console.log('测试关系：',relation)
                    console.log('测试关系节点：',nodes)
                    console.log('测试结点类型：',cate_index)
                    // 生成亮度为中等或者较暗的颜色
                    
                    // 调用函数生成颜色
                    const color = generateColor();
        
                    for (var j = 0; j < nodes.length; j++) {
                        nodeList.push({
                            name: nodes[j].name,
                            id: nodes[j].id,
                            symbolSize: 30,
                            draggable:true,
                            category:cate_index,
                            itemStyle: {
                                normal: {
                                    // color: color
                                }
                        }});
                        linkList.push({
                            source: this.nodeID,
                            target: nodes[j].id,
                            label: {
                            show: true,
                            formatter: relation, 
                            fontSize: 12,
                            color:color
                            }
                        })
                    }
                }  
                let dom = document.getElementById('view')
                let mychart = this.$echarts.init(dom) //初始化echarts实例
            let option = {
            title: { text: this.selectType+this.nodeName + '的关系节点' },
            tooltip: {
                formatter: function(x){
                    return x.data.id
                }
            },
            legend:{
                data: categories.map(function (category) {
                    return category.name;
                }),
                textStyle: {
                    
                },
            },
            series: [
                {
                    type: 'graph',
                    layout :'force',
                    edgeSymbol: ['none', 'arrow'],
                    categories:categories,
                    force: {
                        repulsion: 2000,
                        edgeLength:200,
                        gravity: 0.1
                    },
                    nodes:nodeList,
                    links:linkList,
                    label: {
                    show: true,
                    position: "bottom",
                    distance: 5,
                    fontSize: 15,
                    align: "center",
                    }
                }
            ]
        };
            mychart.setOption(option);
            this.loading=false
            })
        }
    
    },
        mounted() {
            console.log("这里是atlas组件")
            this.getRelationNodes()
            }
}
</script>

<style lang="scss">
    .data-view {
        margin-top: 10px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        .el-card {
            width: 100%;
            #view{
                height: 800px;
                width: 100%;
            }
        }
    }
</style>